<template>
    <main>
        <div class="top">
        	<form @submit.prevent="query">
        		价格：<input type="number" name="minPrice" v-model.number="minPrice"  min="0"> 元 -
        		<input type="number" name="maxPrice" v-model.number="maxPrice" :min="minPrice || 0"> 元
        		<button>查询</button>
        		<button @click.prevent="clear">清空</button>
        	</form>
         	<p v-if="cartCount">
                您的购物车中有<strong>{{ cartCount }}</strong>件商品
                <template v-if="bookName">
                    您刚刚将<strong>{{ bookName }}</strong>加入到了购物车中
                </template>
         	</p>
            <p v-else>您的购物车为空！</p>
        </div>
        <Table :state="state">
            <template v-slot:thead>
                <th>ID</th>
                <th>图片</th>
                <th>书名</th>
                <th>作者</th>
                <th>价格</th>
                <th>销量</th>
                <th>库存</th>
                <th>操作</th>
            </template>
            <tr v-for="item in bookList" :key="item.id">
                <th>{{ item.id }}</th>
                <td>
                    <MyImage :src="item.imgPath"></MyImage>
                </td>
                <td class="text-left">{{ item.name }}</td>
                <td>{{ item.author }}</td>
                <td>{{ item.price }}</td>
                <td>{{ item.sales }}</td>
                <td>{{ item.stock }}</td>
                <td>
                    <button class="btn-primary" @click="addBookToCart(item.id, item.name)">加入购物车</button>
                </td>
            </tr>
        </Table>
        <Pagination @pageTurn="pageTurn"
            :pageNo="pageNo" :pageSize="pageSize" :totalPage="totalPage" :totalCount="totalCount"></Pagination>
    </main>
</template>

<script>
    import bookService from '../service/BookService';
    import cartService from '../service/CartService';
    import Table from '../components/Table.vue';

    /**
     * 首页
     */
    export default {
        components: { Table },
        data() {
            return {
                state: 'normal',    // 状态: 正常、加载中、加载数据为空
                minPrice: null,     // 最低价
                maxPrice: null,     // 最高价
                pageNo: 1,          // 当前页码
                pageSize: 5,        // 页容量
                totalPage: 0,       // 总页数
                totalCount: 0,      // 数据总条数
                bookList: [],       // 图书数据
                cartCount: 0,        // 购物车商品数量
                bookName: '',       // 添加到购物车的商品名称
            }
        },
        methods: {
            /**
             * 发起请求，获取图书数据
             */
            async getBookList(pageNo, pageSize, minPrice, maxPrice) {
                if (this.state === 'loading') return;
                this.state = 'loading';

                const result = await bookService.getBookList(pageNo, pageSize, minPrice, maxPrice);
                if (result.totalCount === 0) {
                    this.state = 'empty';
                    return;
                }
                this.pageNo = result.pageNo,
                this.totalPage = result.total;
                this.totalCount = result.totalCount;
                this.bookList = result.data;
                this.state = 'normal';
            },
            /**
             * 根据价格查询图书数据
             */
            query() {
                this.getBookList(1, this.pageSize, this.minPrice, this.maxPrice);
            },
            /**
             * 清空查询条件
             */
            clear() {
                if (this.minPrice === null && this.maxPrice === null) return;
                this.minPrice = this.maxPrice = null;
                this.getBookList(1, this.pageSize);
            },
            /**
             * 翻页事件
             */
            pageTurn(pageNo) {
                this.getBookList(pageNo, this.pageSize, this.minPrice, this.maxPrice);
            },
            /**
             * 添加商品到购物车
             * @param {string|number} bookId 图书id
             * @param {string} bookId 图书名称
             */
            async addBookToCart(bookId, bookName) {
                const result = await cartService.add(bookId);
                if (result.isSuccess) {
                    this.cartCount = result.data;
                    this.bookName = bookName;
                } 
            }
        },
        created() {
            this.getBookList(1, this.pageSize);
            cartService.getCartCount().then(count => this.cartCount = count);
        }
    }
</script>

<style lang="less" scoped>
    main {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-top: 10px;
        padding-bottom: 2px;
    }
    /* 头部样式 */
    .top {
        padding: 20px 0;
        form {
            width: auto;
        }
    }
    p {
        margin: 10px 0;
    }
    input {
        height: 30px;
        padding-left: 10px;
        width: 80px;
        outline-color: var(--color-primary);
        &::-webkit-inner-spin-button,
        &::-webkit-inner-spin-button {
            height: 30px;
            width: 30px;
            cursor: pointer;
            margin-left: 10px;
        }
    }
    button {
        height: 30px;
        margin-left: 10px;
        padding: 0 10px;
        cursor: pointer;
    }
    strong {
        color: #ff0000;
        padding: 0 5px;
    }
    /* 头部样式 end */

    .table-container {
        min-height: 420px;
        max-height: 420px;
        flex: none;
    }
</style>